import React from 'react'
import { Button, Form, Input, message } from 'antd';
import axios from 'axios'

export default function Login(props) {
  const [form] = Form.useForm()
  const submitChange = (value) => {
    axios.get('http://localhost:5000/loginInfo').then(res => {
      if (value.username !== res.data[0].username || value.password !== res.data[0].password) {
        message.error('账号或密码错误!');
      } else {
        localStorage.setItem('token', '摸鱼')
        props.history.replace('/home')
        message.success('欢迎回来!');
      }
    })
  }
  return (
    <div style={{ backgroundImage: 'url(https://api.vvhan.com/static/img/bg.jpeg)', backgroundRepeat: 'no-repeat', backgroundSize: '100%', height: '100vh', paddingTop: '18%', boxSizing: 'border-box' }}>
      <div style={{ width: '30%', height: '240px', margin: '0 auto', background: '#fff', borderRadius: '12px', boxShadow: '0px 0px 10px 0px #ccc', paddingTop: '5px', boxSizing: 'border-box' }}>
        <h2 style={{ textAlign: 'center' }}>打工人摸鱼系统</h2>
        <Form
          name="basic"
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 16,
          }}
          form={form}
          onFinish={submitChange}
        >
          <Form.Item
            label="账号"
            name="username"
            rules={[
              {
                required: true,
                message: '请输入账号',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 4,
            }}
          >
            <Button style={{ width: '220px' }} type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
